import {designPage, reactive, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {$message, Button, ColorPicker, DatePicker, Form, FormItem, Input, InputNumber, Select, SelectOption, Switch, TimePicker, Tooltip} from "../../../../packages";
import QuestionCircleOutlined from '@ant-design/icons/QuestionCircleOutlined';
/*export const demoArrayjson = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form,
  });

  const state = reactive({
    formData: {
      enterpriseName: '',
    } as any,
    showAddress: true,
    rules: {
      legalName: { required: true },
    },
  });

  const submit = async () => {
    await refs.form?.validate();
    $message('校验通过');
  };

  return () => (
    <DemoRow title="校验arrayjson">
      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
        <FormItem label="所在地">
          <Checkbox v-model={state.showAddress} label="所在地"/>
        </FormItem>
        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arrayjson', min: 3, max: 5, trigger: 'blur' }}>
          <Select multiple valueType="arrayjson" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
            <SelectOption children="支付宝" val="alipay"/>
            <SelectOption children="微信支付" val="wechat_pay"/>
            <SelectOption children="财付通" val="qq_pay"/>
            <SelectOption children="快支付" val="fast_pay"/>
            <SelectOption children="云闪付" val="cloud_pay"/>
            <SelectOption children="网银支付" val="net_pay"/>
            <SelectOption children="快捷支付" val="convince_pay"/>
            <SelectOption children="paypal" val="paypal"/>
          </Select>
        </FormItem>
        <div style={{ textAlign: 'right' }}>
          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
        </div>
        {!!state.showAddress && (
          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
            <Input v-model={state.formData.address} placeholder="所在地"/>
          </FormItem>
        )}
        <FormItem label="Form.rules->field" field="legalName">
          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
        </FormItem>
        <FormItem colon={false}>
          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
          <Button label="Commit" onClick={submit} type="primary"/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});*/


export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form
  });

  const state = reactive({
    formData: {} as any,
    disabled: undefined as undefined | boolean,
  });

  const { formData } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  const treeData = [
    {
      id: '1',
      name: '一级 1',
      subs: [
        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
          id: '1-' + index,
          name: '二级 1-' + index,
          subs: [{
            id: `1-${index}-1`,
            name: `三级 1-${index}-1`
          }]
        })))
      ]
    }, {
      id: '2',
      name: '一级 2',
      subs: [
        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
          id: '2-' + index,
          name: '二级 2-' + index,
          subs: [{
            id: `2-${index}-1`,
            name: `三级 2-${index}-1`
          }]
        })))
      ]
    }, {
      id: '3',
      name: '一级 3',
      subs: [{
        id: '3-1',
        name: '二级 3-1',
        subs: [{
          id: '3-1-1',
          name: '三级 3-1-1'
        }, {
          id: '3-1-2',
          name: '三级 3-1-2'
        }]
      }, {
        id: '3-2',
        name: '二级 3-2',
        subs: [{
          id: '3-2-1',
          name: '三级 3-2-1'
        }]
      }]
    }];

  async function saveValidate() {
    await refs.form!.validate();
    $message.success('校验通过');
  }

  return () => (
    <div>
      <DemoRow title={'blur校验'}>
        <Form ref={onRef.form} modelValue={formData} disabled={state.disabled}>
          <FormItem label={'普通文本框'} field={'field1'} rules={{ required: true, trigger: 'blur' }}>
            <Input v-model={formData.field1}/>
          </FormItem>
          <FormItem label={'普通文本域'} field={'field2'} rules={{ required: true, trigger: 'blur' }}>
            <Input v-model={formData.field2} textarea/>
          </FormItem>
          <FormItem label={'数字框'} field={'field3'} rules={{ required: true, trigger: 'blur' }}>
            {{
              default: () => <InputNumber v-model={formData.field3}/>,
              append: () => <Tooltip message={'提示'}><QuestionCircleOutlined/></Tooltip>,
            }}
          </FormItem>
          <FormItem label={'下拉选项'} field={'field6'} rules={{ required: true, trigger: 'blur' }}>
            <Select v-model={formData.field6}>
              {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
            </Select>
          </FormItem>
          {/*<FormItem label={'级联选择'} field={'field61'} rules={{ required: true, trigger: 'blur' }}>
            <Cascade
              v-model={formData.field61}
              data={treeData}
              labelField={'name'}
              keyField={'id'}
              childrenField={'subs'}
            />
          </FormItem>*/}
          <FormItem label={'开关按钮'} field={'field10'} rules={{ required: true, trigger: 'blur' }}>
            <Switch v-model={formData.field10}/>
          </FormItem>
          <FormItem label={'颜色选择器'} field={'field14'} rules={{ required: true, trigger: 'blur' }}>
            <ColorPicker v-model={formData.field14}/>
          </FormItem>
          <FormItem label={'时间选择'} field={'field15'} rules={{ required: true, trigger: 'blur' }}>
            <TimePicker v-model={formData.field15}/>
          </FormItem>
          <FormItem label={'时间范围选择'} rules={[
            { field: 'field17', required: true, trigger: 'blur' },
            { field: 'field18', required: true, trigger: 'blur' },
          ]}>
            <TimePicker v-model:start={formData.field17} v-model:end={formData.field18} range/>
          </FormItem>
          <FormItem label={'日期时间选择'} field={'field19'} rules={{ required: true, trigger: 'blur' }}>
            <DatePicker v-model={formData.field19} datetime/>
          </FormItem>
          <FormItem label={'日期时间范围选择'} rules={[
            { field: 'field20', required: true, trigger: 'blur' },
            { field: 'field21', required: true, trigger: 'blur' },
          ]}>
            <DatePicker v-model:start={formData.field20} v-model:end={formData.field21} range datetime/>
          </FormItem>
          <FormItem colon={false}>
            <Button label={'校验'} onClick={saveValidate}/>
            <Button label={'取消校验'} onClick={() => refs.form!.clearValidate()}/>
          </FormItem>
          <FormItem colon={false}>
            <Button label={state.disabled ? '启用' : '禁用'} onClick={() => state.disabled = !state.disabled} disabled={false}/>
          </FormItem>
        </Form>
      </DemoRow>
    </div>
  );
});
